<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var cfg = {SearchMode:smLazyLoad, Page:10, MergeSheet:msHeaderOnly, PrevColumnMergeMode:0};
		var headers = [
			{Text:"신청인|신청일자|결재여부|신청금액|근태기간|근태기간|시간|시간", Align:"Center"}
			,{Text:"신청인|신청일자|결재여부|신청금액|시작일|종료일|시작|종료", Align:"Center"}
		];
		var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		var cols = [
			{Type:"Text",Width:80,ColMerge:1},
			{Type:"Date",Width:100,Format:"Ymd",ColMerge:1,Align:"Center"},
			{Type:"CheckBox",Width:80,SaveName:"A",ColMerge:0},
			{Type:"AutoSum",Width:85,SaveName:"B",Format:"Integer",ColMerge:0},
			{Type:"Date",Width:100,SaveName:"C",Format:"Ymd",Align:"Center",ColMerge:0},
			{Type:"Date",Width:100,SaveName:"D",Format:"Ymd",Align:"Center",ColMerge:0},
			{Type:"Date",Width:100,Format:"Hm",Align:"Center"},
			{Type:"Date",Width:100,Format:"Hm",Align:"Center"}
		];

		mySheet.SetConfig(cfg);
		mySheet.InitHeaders(headers,info);
		mySheet.InitColumns(cols);
		
		mySheet.FitColWidth();
		
		doAction('search');
	});
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/merge_data.xml");
				break;
			case "reload":
				mySheet.RemoveAll();
				break;
		}
	}
	
	function mySheet_OnMouseDown(Button, Shift, X, Y) {
		$('#idxRow').val(mySheet.MouseRow());
		$('#idxCol').val(mySheet.MouseCol());
	}

	function setMerge(){
		var idxRow = parseInt($('#idxRow').val());
		var idxCol = parseInt($('#idxCol').val());
		var cntRow = parseInt($('#cntRow').val());
		var cntCol = parseInt($('#cntCol').val());
		mySheet.SetMergeCell(idxRow, idxCol, cntRow, cntCol);
	}
</script>
<title>사용자 머지 기능 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">사용자 머지 기능 예제</div>
	<div id="desc">
		SetMergeCell 함수를 통해 특정 셀을 기준으로 인접한 셀과 강제로 머지한다.<br> 
		반드시 조회용 화면에서만 사용해야 한다.<br>
		일반적인 경우 인접한 셀과 값이 동일한 경우에만 자동으로 머지되지만, 이 메소드를 호출하면 지정된 셀로부터 특정한 크기로 무조건적(인접한 셀들과 값이 동일하지 않더라도)으로 강제 머지되어 표시된다.<br>
		<br>
		<table width="550" border="1" style="border-spacing: 2px; border-style: none; border-color: #CCCCCC;">
			<tr style="text-align:center">
				<td width="100">파라미터</td>
				<td width="100">타입</td>
				<td width="100">필수여부</td>
				<td>설명</td>
			</tr>
			<tr>
				<td align="center">Row</td>
				<td align="center">Long</td>
				<td align="center">필수</td>
				<td>강제 머지할 셀의 Row Index</td>
			</tr>
			<tr>
				<td align="center">Col</td>
				<td align="center">Long</td>
				<td align="center">필수</td>
				<td>강제 머지할 셀의 Column Index</td>
			</tr>
			<tr>
				<td align="center">Rows</td>
				<td align="center">Long</td>
				<td align="center">필수</td>
				<td>강제 머지할 셀의 Row 갯수</td>
			</tr>
			<tr>
				<td align="center">Cols</td>
				<td align="center">Long</td>
				<td align="center">필수</td>
				<td>강제 머지할 셀의 Col 갯수</td>
			</tr>
		</table>
		<br>
		시트 설정시 다음과 같이 설정할 수 있다.
		<table width="550" border="1" style="border-spacing: 2px; border-style: none; border-color: #CCCCCC;">
			<tr>
				<td>
					// (1,10)부터(2,11)까지 2x2 창문형태의 셀을 강제로 머지하여 표시한다.<br>
					mySheet.SetMergeCell(1, 10, 2, 2);
				</td>
			</tr>
		</table>
		<br>
	</div>

	<div id="functionArea">
		<span>
			행 번호<input id="idxRow" size="4" type="text"/>,
			열 번호<input id="idxCol" size="4" type="text"/>,
			가로 갯수<input id="cntRow" size="4" type="text"/>
			세로 갯수<input id="cntCol" size="4" type="text"/>
			<input type="button" value="머지 적용" onclick="setMerge()">
		</span>
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>